<template>
	<view class="wrap">

		<view class="swiper">
			<image src="/static/aidex/img/1.png" mode=""></image>
		</view>
		<view class="form">
			<view class="tab">
				<view @click="flag1=true;flag2=false" class="item " :class="[flag1?'active1':'']">
					个人
				</view>
				<view @click="flag2=true;flag1=false" class="item " :class="[flag2?'active2':'']">
					企业
				</view>
			</view>
			<view class="info">
				<u-form :border-bottom="false" :model="form" ref="uForm">
					<u-form-item :border-bottom="false" prop="name">
						<u-input border-color="#cccccc" height="80" border v-model="form.name"
							placeholder="请输入姓名(必填)" />
					</u-form-item>
					<u-form-item :border-bottom="false" prop="idcard">
						<u-input border-color="#cccccc" height="80" border v-model="form.idcard"
							placeholder="请输入身份证号码(必填)" />
					</u-form-item>
				</u-form>
				<view class="tips">
					357万人用户已查
				</view>
				<view class="sub">
					<u-button type="primary" @click="submit" :ripple="true" ripple-bg-color="#909399">查询</u-button>

				</view>

				<view class="rule">
					<view class="tip">

						<u-checkbox size="24" active-color="#4a77f5" label-size="24"
							v-model="checked">我已阅读并同意</u-checkbox><text>《用户协议》</text>及<text>《隐私政策》</text>

					</view>
					<view class="tip">
						<u-checkbox size="24" label-size="24" active-color="#4a77f5"
							v-model="checked">我已阅读并同意</u-checkbox><text>《授权同意书》</text>及<text>《他人授权承诺书》</text>

					</view>
					<view class="tip">
						<u-checkbox size="24" active-color="#4a77f5" v-model="checked">
							<text>本产品提供数据查询服务，该交易不可撤销</text>
						</u-checkbox>
					</view>
				</view>
			</view>
		</view>

		<view class="notice">
			<view class="tit">
				查询动态
			</view>
			<view class="bar">
				<u-notice-bar color="#333" bg-color="#fff" type="primary" mode="vertical" :list="list"></u-notice-bar>
			</view>
		</view>

		<view class="caseDetail">
			<view class="casebtn" @click="gocase">
				报告案例
				<image src="/static/aidex/img/rt_arrows.png" mode=""></image>
			</view>
			<view class="title">
				案件详情信息
			</view>
			<view class="imglist">
				<view class="item">
					<image src="/static/aidex/img/sheanzongshu.png" mode=""></image>
					<view class="name">
						涉案总数
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/anjianxiangqing.png" mode=""></image>
					<view class="name">
						案件详情
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/anjianleixing.png" mode=""></image>
					<view class="name">
						案件类型
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/lianshijian.png" mode=""></image>
					<view class="name">
						立案时间
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/panjuejieguo.png" mode=""></image>
					<view class="name">
						判决结果
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/beizhixing.png" mode=""></image>
					<view class="name">
						被执行情况
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/chufashijian.png" mode=""></image>
					<view class="name">
						处罚时间
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/chufajiguan.png" mode=""></image>
					<view class="name">
						处罚机关
					</view>
				</view>
				<view class="item">
					<image src="/static/aidex/img/chufaqingkuan.png" mode=""></image>
					<view class="name">
						处罚情况
					</view>
				</view>
			</view>
		</view>

	</view>

</template>
<script>
	export default {
		data() {
			return {
				list: [
					'5分钟前，****查询案件',
					'6分钟前，****查询案件',
					'7分钟前，****查询案件',
					'8分钟前，****查询案件'
				],
				checked: false,
				flag1: true,
				flag2: false,
				form: {
					name: '',
					idcard: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

					// console.log(this.$u.test.idCard('110101199003070134'));
					idcard: [{
						required: true,
						message: '请输入身份证号码',
						trigger: 'change'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证号不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		onLoad(e) {},
		methods: {
			gocase() {
				uni.navigateTo({
					url: "/pages/sys/home/case"
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.caseDetail {
		position: relative;
		margin: 20rpx 0rpx;
		border-radius: 18rpx;

		.casebtn {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			right: 0;

			border-radius: 0 18rpx 0 20rpx;
			background: linear-gradient(#809fff 0%, #4b78f5 100%);
			width: 160rpx;
			height: 55rpx;
			font-size: 24rpx;
			color: #fff;

			image {
				width: 16rpx;
				height: 16rpx;
				margin-left: 3rpx;
				margin-top: 4rpx;
			}
		}

		background: #fff;
		padding: 30rpx 30rpx;

		.title {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #4a77f5;
			text-align: center;

		}

		.imglist {
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 33.33%;

				image {
					width: 92rpx;
					height: 92rpx;
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666;
				}
			}
		}
	}

	.notice {
		margin: 20rpx 30rpx;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 14rpx 30rpx;

		/deep/ .uicon-volume-fill[data-v-6e20bb40]:before {
			content: "\e66c";
		}

		.tit {
			background: #4a77f5;
			padding: 6rpx 18rpx;
			color: #fff;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			border-radius: 10rpx;
		}

		.bar {
			flex: 1;
		}
	}

	/deep/ .u-checkbox__label {
		margin-right: 2px !important;
	}

	.swiper {
		image {
			width: 100%;
			height: 450rpx;
		}
	}

	.rule {
		padding-top: 20rpx;
		color: #505256;
		font-size: 12px;

		.tip {
			text {
				color: #4a77f5;
				font-size: 12px;
			}
		}
	}

	.form {
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 18rpx;
		padding: 0 0 0rpx;
		overflow: hidden;

		.info {
			margin: 30rpx;
		}

		.tips {
			color: #ff0000;
			font-size: 12px;
		}

		.sub {
			margin-top: 20rpx;
			border-radius: 8rpx;
			height: 90rpx;
			background: linear-gradient(#809fff 0%, #4b78f5 100%);

			/deep/ .u-size-default {
				border: none;

				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(#809fff 0%, #4b78f5 100%);
			}
		}

		.tab {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				color: #4a77f5;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;

				&.active1 {
					background: linear-gradient(#809fff 0%, #4b78f5 100%);
					color: #fff;
					border-radius: 0 0 25rpx 0;
				}

				&.active2 {
					background: linear-gradient(#809fff 0%, #4b78f5 100%);
					color: #fff;
					border-radius: 0 0 0 25rpx;
				}
			}
		}
	}
</style>